/**
 * 设备详情Tabs
 */
import React, {Component} from 'react';
import {connect} from 'dva';
import {Card, Tabs, Form, Row, Col} from 'antd';
import OperationHistory from '../../components/operationHistory';
import Pc, {isReleaseVersion} from '../../components/permissionControl';
import {api as deviceApi, dataDetail} from '../../services/device';
import {api as orderApi} from '../../services/order';
import {api as serviceApi} from '../../services/serviceMode';
import {api as alarmApi} from '../../services/alarm';
import DetailControl from './detailControl';
import DetailOperationInfo from './detailOperationInfo';
import OrderTable from '../order/table';
import RunningRecordTable from './deviceRunningTable';
import RealTimeStatus from './realTimeStatus';
import DetailChargeInfo from './detailChargeInfo';
import AlarmList from './alarmList';
import BindUserList from './bindUserList';
import {isSuccess} from '../../configs/error';

const TabPane = Tabs.TabPane;
const FormItem = Form.Item;

export const dp = {
  undervoltageFault: '欠压故障',
  pollutionFault: '污染故障',
  staticPointFault: '静态点故障',
  detectorLossFault: '探测器丢失故障',
  fireAlarm: '火警',
  selfChecking: '自检',
  analogQuantity: '模拟量',
  rssi: 'RSSI',
  temperature: '温度'
};
export const dpObj = {};
Object.keys(dp).forEach(k => dpObj[k.toLowerCase()] = dp[k]);

const styles = {
  root: {padding: '20px'},
  tabs: {
    padding: '0 17px',
    marginTop: '-17px',
    minHeight: '200px'
  },
  tabsPanel: {
    width: '100%',
    minHeight: '200px'
  },
  img: {
    border: '1px solid #ccc',
    width: '300px',
    height: '300px',
    margin: '0 20px'
  },
  empty: {
    color: '#ccc'
  }
};

class DetailTabs extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      detailData: {},
      dataStatus: null// 数据点实时状态
    };
  }

  componentWillReceiveProps(nextProps) {
    let {detailData} = nextProps.device;
    if (detailData !== this.props.device.detailData) {
      detailData = detailData || {};
      this.setState({
        detailData
      });
    }
  }

  componentDidMount() {
    this.getDataStatus();
  }

  componentDidUpdate(prevProps, prevState) {
    this.getDataStatus();
  }

  async getDataStatus() {
    const {dataStatus, detailData} = this.state;
    if (!detailData || !detailData.mac || dataStatus) return;
    const res = await dataDetail(detailData.mac);
    if (isSuccess(res)) {
      this.setState({dataStatus: res.data});
    }
  }

  renderItem = (key) => {
    if (key == 'productKey' || key == 'productName') return;
    const {dataStatus} = this.state;
    return (
      <Col span={8} key={key}>
        <FormItem label={dp[key]}>
          {dataStatus[key] === 'true' ? '是' : dataStatus[key] === 'false' ? '否' : dataStatus[key] ||
            <span style={styles.empty}>暂无数据</span>}
        </FormItem>
      </Col>
    );
  }

  render() {
    const {device: {detailData}} = this.props;
    const {dataStatus} = this.state;
    if (!dataStatus) return null;
    // return <img src={detailData.qrcodeUrl || `/qrcode/${detailData.sno}.jpg`} style={styles.img} />;
    return (
      <div style={styles.root}>
        <h2>实时状态</h2>
        <Row gutter={24}>{Object.keys(dataStatus).map(this.renderItem)}</Row>
      </div>
    );
  }

  // render() {
  //     const { device: { detailData }, permissions = [], dispatch, loading, order, location, deviceSno } = this.props;
  //     const isRelease = isReleaseVersion(permissions, deviceApi.query);
  //     // const is = false;
  //     const { query } = location;
  //     return (
  //         <Pc mode="permissionUrl" level={2}>
  //             <Tabs defaultActiveKey={query.tab || '1'} type="line" style={styles.tabs}>
  //                 {isRelease &&
  //                     <TabPane tab="收费模式" key="1" style={styles.tabsPanel} permissionUrl={deviceApi.query}>
  //                         <Card style={styles.tabs}>
  //                             <DetailChargeInfo />
  //                         </Card>
  //                     </TabPane>
  //                 }
  //                 {isRelease &&
  //                     <TabPane tab="投放信息" key="2" style={styles.tabsPanel} permissionUrl={deviceApi.query}>
  //                         <Card style={styles.tabs}>
  //                             <DetailOperationInfo />
  //                         </Card>
  //                     </TabPane>}
  //                 <TabPane tab="已绑定用户" key="3" style={styles.tabsPanel} permissionUrl={deviceApi.getDeviceBindUserList}>
  //                     <Card style={{ ...styles.tabs, paddingTop: '10px' }}>
  //                         <BindUserList sno={deviceSno} />
  //                     </Card>
  //                 </TabPane>
  //                 <TabPane tab="设备控制" key="4" style={styles.tabsPanel} permissionUrl={deviceApi.control}>
  //                     <Card style={styles.tabs}>
  //                         <DetailControl />
  //                     </Card>
  //                 </TabPane>
  //                 <TabPane tab="订单列表" key="5" style={styles.tabsPanel} permissionUrl={orderApi.query}>
  //                     <Card style={{ ...styles.tabs, paddingTop: '10px' }}>
  //                         <OrderTable queryData={{ deviceMac: detailData ? detailData.mac : '' }} dispatch={dispatch} loading={loading} order={order} />
  //                     </Card>
  //                 </TabPane>
  //                 <TabPane tab="运行日志" key="6" style={styles.tabsPanel} permissionUrl={deviceApi.runningRecordList}>
  //                     <Card style={{ ...styles.tabs, paddingTop: '10px' }}>
  //                         <RunningRecordTable />
  //                     </Card>
  //                 </TabPane>
  //                 <TabPane tab="操作记录" key="7" style={styles.tabsPanel} permissionUrl={deviceApi.operatorList}>
  //                     <Card style={{ ...styles.tabs, paddingTop: '10px' }}>
  //                         <OperationHistory deviceSno={deviceSno} />
  //                     </Card>
  //                 </TabPane>
  //                 <TabPane tab="设备上报" key="8" style={styles.tabsPanel} permissionUrl={deviceApi.realStatus}>
  //                     <Card style={{ ...styles.tabs, paddingTop: '10px' }}>
  //                         <RealTimeStatus deviceSno={deviceSno} />
  //                     </Card>
  //                 </TabPane>
  //                 <TabPane tab="告警记录" key="9" style={styles.tabsPanel} permissionUrl={alarmApi.query}>
  //                     <Card style={{ ...styles.tabs, paddingTop: '10px' }}>
  //                         <AlarmList deviceSno={deviceSno} tab={query.alarmType} />
  //                     </Card>
  //                 </TabPane>
  //             </Tabs >
  //         </Pc>
  //     );
  // }
}


DetailTabs.propTypes = {};

export default connect(({device, app, loading, order}) => ({
  device,
  permissions: app.user.permissions,
  loading,
  order
}))(DetailTabs);
